<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h3 id="p1"></h3>
    <h3 id="p2"></h3>
    <h3 id="p3"></h3>
    <h3 id="p4"></h3>
    <h3 id="p5"></h3>
    <h3 id="output"></h3>
    <script>
      //对象方法
      var user = {
        firstName: "乔尼",
        lastName: "杰罗",
        age: 22,
        location: "真是转了好大一圈啊",
        getName: function () {
          return this.firstName + " " + this.lastName;
        },
        get loc() {
          return this.location;
        },
        set loc2(x) {
          this.location = x;
        },
      };
      document.getElementById("p1").innerHTML = user.getName();
      //添加新方法
      user.greet = function () {
        return this.firstName + " " + this.location;
      };
      document.getElementById("p2").innerHTML = user.greet();
      //get方法(作为属性访问 和函数不同)
      //显示来自对象的数据
      document.getElementById("p3").innerHTML = user.loc;
      //set方法
      user.loc2 = "完美的黄金回旋";
      document.getElementById("p4").innerHTML = user.loc;
      document.getElementById("p5").innerHTML = user.location;
      //Object.defineProperty()
      //语法Object.defineProperty(object, property, {value : value})
      var counter = {
        i: 0,
      };

      Object.defineProperty(counter, "increment", {
        get: function () {
          this.i++;
        },
      });

      Object.defineProperty(counter, "decrement", {
        get: function () {
          this.i--;
        },
      });

      Object.defineProperty(counter, "reset", {
        get: function () {
          this.i = 0;
        },
      });

      Object.defineProperty(counter, "add", {
        set: function (value) {
          this.i += value;
        },
      });

      Object.defineProperty(counter, "subtract", {
        set: function (value) {
          this.i -= value;
        },
      });

      counter.reset;
      counter.add = 25;
      counter.increment;
      counter.subtract = 10;

      document.getElementById("output").innerHTML = counter.i;
    </script>
  </body>
</html>
